<template>
  <view class="container">
    <!-- 优惠券类型标签页 -->
    <view class="tabs">
      <view 
        class="tab-item"
        v-for="(item, index) in tabs"
        :key="index"
        :class="{'active': currentTab === index}"
        @click="switchTab(index)"
      >
        <text>{{item.name}}</text>
      </view>
    </view>
    
    <!-- 优惠券列表 -->
    <scroll-view 
      class="coupon-list"
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view 
        class="coupon-item"
        v-for="item in coupons"
        :key="item.id"
        :class="{'used': item.status === 2, 'expired': item.status === 3}"
      >
        <view class="left">
          <text class="amount">¥{{item.amount}}</text>
          <text class="condition">满{{item.condition}}元可用</text>
        </view>
        <view class="right">
          <view class="info">
            <text class="name">{{item.name}}</text>
            <text class="time">有效期至：{{item.endTime}}</text>
          </view>
          <view class="action">
            <button 
              class="btn" 
              :class="{'disabled': item.status !== 1}"
              @click="useCoupon(item)"
            >
              {{getStatusText(item.status)}}
            </button>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading" v-if="loading">
        <text>加载中...</text>
      </view>
      
      <!-- 无数据提示 -->
      <view class="empty" v-if="coupons.length === 0 && !loading">
        <image src="/static/images/empty.png" mode="aspectFit"/>
        <text>暂无优惠券</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '可用优惠券' },
        { name: '已使用' },
        { name: '已过期' }
      ],
      currentTab: 0,
      coupons: [],
      page: 1,
      size: 10,
      loading: false,
      hasMore: true,
      refreshing: false
    }
  },
  onLoad() {
    this.loadCoupons()
  },
  methods: {
    // 切换标签页
    switchTab(index) {
      this.currentTab = index
      this.page = 1
      this.hasMore = true
      this.coupons = []
      this.loadCoupons()
    },
    // 加载优惠券列表
    async loadCoupons() {
      if (!this.hasMore || this.loading) return
      
      this.loading = true
      
      try {
        // 模拟数据
        const mockData = {
          list: [
            {
              id: 1,
              name: '新人专享券',
              amount: 10,
              condition: 100,
              startTime: '2024-03-01',
              endTime: '2024-03-31',
              status: 1 // 1: 未使用, 2: 已使用, 3: 已过期
            },
            {
              id: 2,
              name: '满减优惠券',
              amount: 20,
              condition: 200,
              startTime: '2024-03-01',
              endTime: '2024-03-31',
              status: 2
            }
          ],
          total: 2
        }
        
        if (this.page === 1) {
          this.coupons = mockData.list
        } else {
          this.coupons = [...this.coupons, ...mockData.list]
        }
        
        this.hasMore = this.coupons.length < mockData.total
        this.page++
      } catch (error) {
        uni.showToast({
          title: '获取优惠券失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        if (this.refreshing) {
          this.refreshing = false
        }
      }
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '立即使用',
        2: '已使用',
        3: '已过期'
      }
      return statusMap[status] || ''
    },
    // 使用优惠券
    useCoupon(coupon) {
      if (coupon.status !== 1) return
      
      uni.showModal({
        title: '使用优惠券',
        content: '确定要使用这张优惠券吗？',
        success: (res) => {
          if (res.confirm) {
            // 跳转到商品列表页
            uni.navigateTo({
              url: '/pages/product/list'
            })
          }
        }
      })
    },
    // 加载更多
    loadMore() {
      this.loadCoupons()
    },
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.page = 1
      this.hasMore = true
      this.loadCoupons()
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  
  .tabs {
    display: flex;
    background: #fff;
    padding: 20rpx 0;
    position: sticky;
    top: 0;
    z-index: 1;
    
    .tab-item {
      flex: 1;
      text-align: center;
      
      text {
        font-size: 28rpx;
        color: #333;
      }
      
      &.active {
        text {
          color: #ff6b6b;
          font-weight: bold;
        }
      }
    }
  }
  
  .coupon-list {
    height: calc(100vh - 100rpx);
    padding: 20rpx;
    
    .coupon-item {
      display: flex;
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      &.used,
      &.expired {
        opacity: 0.6;
      }
      
      .left {
        width: 200rpx;
        background: #ff6b6b;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30rpx;
        
        .amount {
          font-size: 48rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        
        .condition {
          font-size: 24rpx;
        }
      }
      
      .right {
        flex: 1;
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .info {
          .name {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .action {
          text-align: right;
          
          .btn {
            display: inline-block;
            padding: 10rpx 30rpx;
            background: #ff6b6b;
            color: #fff;
            border-radius: 30rpx;
            font-size: 24rpx;
            
            &.disabled {
              background: #ccc;
            }
          }
        }
      }
    }
    
    .loading,
    .empty {
      text-align: center;
      padding: 30rpx 0;
      
      text {
        font-size: 28rpx;
        color: #999;
      }
      
      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}</style> 